<template>
  <div class="conent">
      
    <!-- 展示阿姨信息 -->
    <div class="main">
        <div class="infor">
            <div class="box">
                  <img :src="'http://housekeepi.com/'+item.icon" alt="">
                <h2>{{item.nick_name}}阿姨</h2>
                <div class="title">
                    <div>
                <el-button type="primary" icon="el-icon-loading" circle></el-button><span>{{kill}}</span>
                    </div>
                    <div>
                <el-button type="primary" icon="el-icon-phone" circle></el-button><span>{{phone}}</span>
                    </div>
                </div>
                <div class="title">
                    <div>
                <el-button type="primary" icon="el-icon-star-on" circle></el-button><span>{{choose}}</span>
                    </div>
                    <div>
                <el-button type="primary" icon="el-icon-s-order" circle></el-button><span>{{item.province}}{{item.city}}{{item.area}}</span>
                    </div>
                    <div>
                <el-button type="danger" icon="el-icon-money" circle></el-button> <span>{{item.h_price}}</span>
                    </div>
                </div>
                <p>{{item.content}}</p>
            </div>
        </div>
        <div class="message">
    <p>【服务价格】</p>
    <el-link type="primary">{{ form.money }}元/小时（2小时起)</el-link>
    <template>
      <el-table :data="tableData" border :header-cell-style="{textAlign: 'center'}" :cell-style="{ textAlign: 'center' }">
        <el-table-column prop="date" label="时长"> </el-table-column>
        <el-table-column prop="price" label="价格"> </el-table-column>
      </el-table>
      <el-link type="primary"
        >注：以上为参考时长，请您根据自家的洁净程度以及具体户型来合理安排时间</el-link
      >
    </template>
    <!-- 点击弹出下单模块 -->
    <el-button type="success" @click="centerDialogVisible = true" class="demo">进入预约</el-button>
        </div>
    </div>
    <!-- 下单模块 -->
    <el-dialog
  title="谢谢你的信任"
  :visible.sync="centerDialogVisible"
  center>
    <el-steps :active="active" finish-status="success">
      <el-step title="你的需求"></el-step>
      <el-step title="有啥话捎给阿姨"></el-step>
      <el-step title="完成预约"></el-step>
    </el-steps>
    <el-form ref="form" :model="form" label-width="80px" v-if="active==0">
      <el-form-item label="服务区域">
        <el-cascader
      size="large"
      :options="options"
      v-model="selectedOptions"
      @change="handleChange"
      class="area"
      >
    </el-cascader>
    <el-input
  placeholder="Enter your address"
  v-model="form.address"
  clearable>
</el-input>
      </el-form-item>
      <el-form-item label="联系方式">
        <el-input
        @blur="phonechange(form.phone)"
  placeholder="Enter your phonenumber"
  v-model="form.phone"
  clearable>
</el-input>
<el-link type="danger">{{msg}}</el-link>
      </el-form-item>
      <el-form-item label="服务时间">
        <el-col :span="11">
          <el-date-picker
      v-model="value2"
      type="datetimerange"
      :picker-options="pickerOptions"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      align="right">
    </el-date-picker>
        </el-col>
      </el-form-item>
    </el-form>
    <el-input
    v-if="active==1"
  type="textarea"
  :rows="2"
  placeholder="请输入内容"
  v-model="texeare">
</el-input>
<el-alert
v-if='active==2' 
    title="你已填写完所有信息"
    type="success"
    center
    show-icon>
  </el-alert>
  <span slot="footer" class="dialog-footer">
    <el-button @click="centerDialogVisible = false">取 消</el-button>
    <el-button type="primary" :plain="true" @click="next">下一步</el-button>
  </span>
</el-dialog>
     
    
  </div>
</template>

<script>

import {mapState} from 'vuex'
import { regionData,CodeToText } from 'element-china-area-data'
export default {
  data() {
    return {
      kill:'',
      active: 0,
      price: "",
      tableData: [
      ],
      centerDialogVisible: false,
      star:0,
       msg:'',
      form: {
        token:'',
        work_user_id:'',
        start_time:'',
        end_time:'',
        phone:'',
        address:'',
        province:'',
        city:'',
        area:'',
        money:''
      },
       value2:'',
       texeare:'',
      options: regionData,
      selectedOptions: [],
     percentage: 25,
        pickerOptions: {
        shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
    };
  },
  computed:{
    ...mapState(['item','choose'])
  },
  methods: {
    next() {
        if(this.active==0){
            let flag=0
            this.form.start_time=this.value2[0].getTime()/1000
            this.form.end_time=this.value2[1].getTime()/1000
            console.log(this.form);
            Object.values(this.form).map((item)=>{
                if(item==''){
                    flag=1
                    return
                }
            })
            if(flag==0){
                if (this.active++ > 2) this.active = 0;
        }else{
             confirm("请填写完整你的需求")
        }
        }else if(this.active==1 && this.star==1){
            if (this.active++ > 2) this.active = 0;
            this.form.remark=this.texeare
             this.senddata(this.form)
        }else if(this.active==2){
            if (this.active++ > 2) this.active = 0;
             this.centerDialogVisible=false
             this.open2()
            // this.$router.push('/recommend')
        }
            
    },
     phonechange(str){
      let reg=new RegExp(/^[1]+[0-9]{10}$/)
      if(reg.test(str)){
        this.msg=''
        this.star=1
      }else{
        this.msg="请输入合法手机号"
      }
    },
    open2() {
        this.$message({
          showClose: true,
          message: '恭喜你，你已预约成功',
          type: 'success',
          offset:520
        });
      },
    creat(price) {
      for (let i = 2; i < 11; i++) {
        let obj = {};
        obj.date = i + "小时";
        obj.price = price * i + "￥";
        this.tableData.push(obj);
      }
    },
    onSubmit() {
      console.log("submit!");
    },
    killfun(val){
      let arr=JSON.parse(val)
      arr.map((item)=>{
        this.kill+=item+'、'
      })
      this.kill=this.kill.substr(0,this.kill.length-1)
    },
     handleChange (value) {
        this.form.province=CodeToText[value[0]]
        this.form.city=CodeToText[value[1]]
        this.form.area=CodeToText[value[2]]
      },
    senddata(val){
      this.myaxios({
      url: "http://housekeepi.com/api/addWork",
      method: "post",
      data: val
    })
      .then((e) => {
        console.log(e);
      })
      .catch(() => {
        console.log("error");
      });
  }
  },
  mounted() {
    console.log(this.item);
    // console.log(this.kill=JSON.parse(this.item.addreess));
    this.killfun(this.item.address)
    this.form.money=this.item.h_price
    this.form.work_user_id=this.item.user_id
    this.form.token=localStorage.getItem('token')
    this.creat(this.item.h_price);
    if(this.item.phone==null){
      this.phone="404-7303185"
    }else{
      this.phone=this.item.phone
    }
  },
};
</script>

<style scoped>
*{
  text-align: center;
}
.demo{
  display: block;
}
.message{
display: grid;
grid-gap: 10px;
}
.area{
  width: 100%;
  border-bottom: 1px solid #000;
}
.el-input__inner{
  width: 100%;
}
/* .el-table td, .el-table th{
  text-align: center  !important;
} */
.conent{
    margin:  0 auto;
    padding: 20px;
}
.el-table .cell {
  text-align: center;
}
.main{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-gap: 50px;
}
.box {
  width: 100%;
  margin: 0 0 20px;
  padding: 10px;
  background: #fff;
  overflow: hidden;
  break-inside: avoid;
}
.box img {
  max-width: 100%;
}
 .box h2 {
  margin: 30px;
  padding: 0;
  font-size: 20px;
}
.box .title{
    padding: 15px 60px;
    display: flex;
    justify-content: space-between;
}
.box .title div{
    display: flex;
    justify-content: center;
    align-items: center;
}
.box .title span{
    font-size: 24px;
    color: springgreen;
}
.box p {
  margin: 0;
  padding: 0 0 10px;
  font-size: 16px;
}
</style>